import React, { useState, useEffect } from "react";
import "./App.css";
import Button, { ButtonSize } from "./components/Button/button";
import Transition from "./components/Transition/_Transition";
import Progress from "./components/Progress/_progress";
import { setInterval } from "timers";
const App: React.FC = () => {
  const [showLeft, setshowLeft] = useState(false);
  const [progressPercent, setprogressPercent] = useState(0)
  const progressInterval = () => {
    let interval:any = null
    setshowLeft(!showLeft)
    // interval = setInterval(()=>{
      
    //   // if(progressPercent<=25){
    //   // setprogressPercent((progressPercent):any=>{
    //   //   console.log(progressPercent,'log-progressPercent')
        
    //   //   progressPercent+1
    //   // })
    //   // }else{
    //   //   clearInterval(interval)
    //   // }
    //   console.log(progressPercent,'log-progressPercent')
    // },100)
    // setInterval(()=>{
    //   let progressPercents = 1
    //   setprogressPercent((progressPercent)=>progressPercent+1)
    //   // progressPercents++
    // },100)
  }
  useEffect(() => {
    console.log(111111,'log-111111')
    
    return () => {
      
    }
  })
  return (
    <div className="App">
      <Button disabled> 按钮 </Button>
      <Button btnType={"link"} href="#" size={ButtonSize.Small}>
        按钮
      </Button>
      <Button btnType={"danger"} size={ButtonSize.Small}>
        按钮{progressPercent}
      </Button>
      <br />
      <Button btnType={"primary"} size={ButtonSize.Small} style={{marginTop:"25px"}} onClick={()=>{progressInterval()}}>
        zoom-in-top
      </Button>
      <Progress percent={progressPercent} />
      <Transition
        in={showLeft}
        timeout={300}
        animation="zoom-in-top"
        wrapper={true}
      >
        <>
          <h1>java</h1>
          <h1>javascript</h1>
          <h1>go</h1>
          <h1>php</h1>
          <h1>node</h1>
        </>
      </Transition>
    </div>
  );
};

export default App;
